<template>
  <div class="home">
    <div class="menu-tem">
      <router-link :to="item.url" class="router-link" v-for="item in routerData" :key="item.id">
        <i :class="item.icon"></i>
        <span>{{item.name}}</span>
      </router-link>
    </div>
  </div>
</template>

<script>

export default {
  name: 'home',
  components: {},
  data() {
    return {
      routerData: [{
        id: 1,
        url: '/formAndUpload',
        icon: 'fa fa-newspaper-o',
        name: 'from表单动态v-decorator'
      }, {
        id: 2,
        url: '/antvG6',
        icon: 'fa fa-credit-card-alt',
        name: 'antv/g6动态画图并给图中添加标签'
      }, {
        id: 3,
        url: '/cssTest',
        icon: 'fa fa-credit-card-alt',
        name: 'cssTest如何实现父元素下的div高度相同'
      }, {
        id: 4,
        url: '/tableDynamicColumn',
        icon: 'fa fa-credit-card-alt',
        name: '表格可编辑，并且部分列可动态显示隐藏'
      }]
    }
  }
}
</script>
<style scoped lang="scss">
  .menu-tem {
    text-align: center;
    background-color: #0f928b;
    a{
      line-height: 50px;
      height: 50px;
      display: block;
      font-size: 20px;
      color: #fff;
      margin-right: 10px;
    }
  }
</style>
